<template>
  <div class="my_warp app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="食物估重"></header-nav>
    </div>

    <div class="middle">
      <div class="left">
        <div 
        :class="['type', { curType: state.curType === types }]" 
        @click="filterType(types)" v-for="types in Object.keys(state.types)">{{types}}</div>
      </div>
      <div class="right">
        <div style="margin-bottom: 10px;" v-for="food in state.tables">
          <img :src="food.weightcover" />
          <div class="title">{{ food.weight }}</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Weight">
import { getFoods } from "@/api/http.js";
const router = useRouter();

const state = reactive({
  // 用户下面的收藏信息等
  weightInfo: {
    cur: 0,
    tar: 0,
    bmi: 1
  },
  userInfo: {},
  types: [],
  groupData: {},
  curType: '',
  tables: []
});

const logout = () => {
  router.push("/login");
}

const filterType = (type) => {
  state.curType = type;
  console.log(state.types)
  state.tables = state.types[type]
  console.log(JSON.stringify(state.tables))
}



onMounted(() => {
  getFoods().then(res => {
    console.log(res)
    let groupedItems = res.data.reduce((accumulator, currentValue) => {
      // 检查 accumulator 对象中是否已存在以当前分类为键的属性
      if (!accumulator[currentValue.weighttype]) {
        accumulator[currentValue.weighttype] = []; // 如果不存在，则初始化为空数组
      }
      // 将当前对象添加到对应分类的数组中
      accumulator[currentValue.weighttype].push(currentValue);
      return accumulator;
    }, {}); // 初始值为一个空对象
    console.log(groupedItems)
    state.types = groupedItems
    filterType(Object.keys(state.types)[0])
  })
});

</script>
<style lang="less" scoped>
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
  .middle {
    width: 100%;
    height: 87vh;
    background: #fff;
    display: flex;
    .left {
      width: 100px;
      height: 87vh;
      overflow: hidden;
      overflow-y: scroll;

      .type {
        font-size: 14px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
      }
      .curType {
        color: green;
      }
    }
    .right {
      width: calc(100% - 120px);
      height: 87vh;
      overflow: hidden;
      overflow-y: scroll;
      background: #f9f1f1;
      padding: 12px;

      .title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #4fc64f;
        margin-top: -6px;
        color: #fff;
        font-size: 14px;
      }

      img {
        width: 100%;
        height: 100px;
      }
    }
  }
}

</style>
